<template>
  <div class="access-record-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span>首页</span>
      <span class="separator">></span>
      <span>生产管理</span>
      <span class="separator">></span>
      <span>业主信息管理</span>
      <span class="separator">></span>
      <span class="current">出入记录</span>
    </div>

    <!-- 标签页 -->
    <el-card class="tab-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="车辆出入记录" name="vehicle">
          <VehicleRecord />
        </el-tab-pane>
        <el-tab-pane label="人员出入记录" name="personnel">
          <PersonnelRecord />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VehicleRecord from './vehicleRecord.vue'
import PersonnelRecord from './personnelRecord.vue'

const activeTab = ref('vehicle')

const handleTabClick = (tab) => {
  console.log('切换到标签:', tab.props.name)

}
</script>

<style scoped>
.access-record-container {
  padding: 16px 20px;
  background: #f5f5f5;
  min-height: calc(100vh - 50px);
}

.breadcrumb {
  margin-bottom: 16px;
  font-size: 14px;
  color: #666;
}

.breadcrumb .separator {
  margin: 0 8px;
  color: #ccc;
}

.breadcrumb .current {
  color: #1890ff;
  font-weight: 500;
}

.tab-card {
  border-radius: 4px;
}

:deep(.el-card__body) {
  padding: 0;
}

:deep(.el-tabs__header) {
  margin: 0;
  padding: 0 20px;
  background: #fff;
}

:deep(.el-tabs__content) {
  padding: 0;
}
</style>